Flex와 Grid

Flex와 Grid는 CSS의 강력한 레이아웃 시스템입니다. 각각의 특징과 사용법을 자세히 살펴 보겠습니다.

1️⃣ FlexBox (Flexible Box)

Flexbox는 1차원(가로 또는 세로) 레이아웃을 구성하는데 최적화된 CSS 레이아웃 방식입니다.

🔹기본 개념

Flexbox는 부모 요소를 Flex Container, 자식 요소를 Flex Items라고 부릅니다.
display: flex;를 설정하면 컨테이너 내부의 아이템들이 유연하게 배치됩니다.

🔹주요 속성

📌 부모 요소 (Flex Container) 속성

속성	설명
`display: flex;`	Flexbox 활성화
`flex-direction`	주축 방향 설정 (`row`, `column`, `row-reverse`, `column-reverse`)
`justify-content`	주축 정렬 (`flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `space-evenly`)
`align-items`	교차축 정렬 (`flex-start`, `flex-end`, `center`, `stretch`, `baseline`)
`align-content`	여러 줄 정렬 (wrap이 필요, `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `stretch`)
`flex-wrap`	요소를 여러 줄로 나눌지 설정 (`nowrap`, `wrap`, `wrap-reverse`)

📌 자식 요소 (Flex Items) 속성

속성	설명
`flex-grow`	남은 공간을 차지하는 비율 (기본값 0)
`flex-shrink`	축소 비율 (기본값 1)
`flex-basis`	기본 크기 설정
`flex`	`flex-grow`, `flex-shrink`, `flex-basis`의 단축 속성
`align-self`	개별 요소의 교차축 정렬 (`auto`, `flex-start`, `flex-end`, `center`, `stretch`, `baseline`)

2️⃣ Grid

Grid는 2차원(행과 열) 레이아웃을 만들기 위한 강력한 CSS 시스템입니다.

🔹기본 개념

display: grid;를 사용하면 부모 요소가 Grid Container, 내부 요소들이 Grid Items가 됩니다.
grid-template-columns와 grid-template-rows 속성으로 행과 열을 정의합니다.

📌 부모 요소 (Grid Container) 속성

속성	설명
`display: grid;`	Grid 활성화
`grid-template-columns`	열 정의 (`repea()`, `auto-fit`, `auto-fill`, `fr` 단위 사용 가능)
`grid-template-rows`	행 정의
`grid-gap 또는 gap`	그리드 간격 (`row-gap`, `column-gap`)
`grid-auto-rows`	자동 행 크기 설정
`grid-auto-columns`	자동 열 크기 설정
`grid-template-areas`	특정 영역을 이름으로 설정
`justify-items`	가로 정렬 (`start`, `end`, `center`, `stretch`)
`align-items`	세로 정렬 (`start`, `end`, `center`, `stretch`)

📌 자식 요소 (Grid Items) 속성

속성	설명
`grid-column`	열의 시작과 끝 지정 (`grid-column: 1 / 3;`)

`grid-row`	행의 시작과 끝 지정 (`grid-row: 2 / 4;`)
`grid-area`	지정된 영역에 배치 (`grid-area: header;`)

3️⃣ 문제🎯

🔹 문제1: Flexbox 레아이웃 만들기

✅ 요구 사항

컨테이너 내부에 3개의 박스가 가로로 배치
첫 번째 박스는 크기가 2배
두 번째 박스는 크기가 1배
세 번째 박스는 크기가 3배
모든 박스의 높이는 100px
배경색은 red, blue, green

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

정답 보기 🔍

.container {
    display: flex;
}
.item:nth-child(1) { flex: 2; background: red; }
.item:nth-child(2) { flex: 1; background: blue; }
.item:nth-child(3) { flex: 3; background: green; }
.item {
    height: 100px;
    text-align: center;
    color: white;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

Flex-example

🔹문제2: Grid 레이아웃 만들기

✅ 요구 사항

2행 2열의 그리드 생성
모든 셀 크기는 100px x 100px
첫 번째 셀은 두 번째 열까지 확장
배경색은 각각 lightcoral, lightblue, lightgreen

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

정답 보기 🔍

.container {
    display: grid;
    grid-template-columns: repeat(2, 100px);
    grid-template-rows: repeat(2, 100px);
    gap: 10px;
}
.item:nth-child(1) {
    grid-column: span 2;
    background: lightcoral;
}
.item:nth-child(2) { background: lightblue; }
.item:nth-child(3) { background: lightgreen; }

.item {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

Grid-example